<template>
  <view class="complaint-page">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="complaint-content">
      <scroll-view
        class="scroll-view"
        scroll-y
        @scrolltolower="loadMore"
        refresher-enabled
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
      >
        <!-- 订单卡片 -->
        <view
          class="order-card"
          v-for="(order, index) in orderList"
          :key="index"
        >
          <!-- 差评图标 -->
          <view class="complaint-icon">
            <image
              :src="IMAGE_URL+'/static/master/cp.png'"
              style="width: 100rpx; height: 100rpx"
            />
          </view>
          <!-- 订单头部 -->
          <view class="order-header">
            <text class="order-number">订单编号：{{ order.orderNumber }}</text>
          </view>

          <!-- 服务信息 -->
          <view class="service-info">
            <view class="service-image">
              <u-image
                :src="order.serviceImage"
                mode="aspectFill"
                width="160rpx"
                height="160rpx"
              ></u-image>
            </view>
            <view class="service-details">
              <view class="service-details-top">
                <text class="service-desc">{{ order.serviceDesc }}</text>
                <text class="service-name">已选：{{ order.serviceName }}</text>
              </view>
              <view class="price-section">
                <text class="price">￥{{ order.price }}</text>
                <text class="price-type">{{ order.priceType }}</text>
              </view>
            </view>
          </view>

          <!-- 客户信息 -->
          <view class="customer-info">
            <text class="customer-label">客户信息</text>
            <view class="customer-details">
              <text class="customer-name">{{ order.customerName }}</text>
              <text class="customer-phone">{{ order.customerPhone }}</text>
            </view>
          </view>

          <!-- 投诉内容 -->

          <view class="customer-info">
            <text class="customer-label">投诉内容</text>
            <view class="customer-details">
              <text class="customer-phone">{{ order.customerPhone }}</text>
            </view>
          </view>

          <!-- 分割线 -->
          <view class="divider"></view>

          <view class="appeal">
            <!-- 申诉时间 -->
            <view class="appeal-time">申诉时间：{{ order.appealTime }}</view>

            <!-- 申诉按钮 -->
            <view class="appeal-btn">
              <button class="btn-appeal" @click="handleAppeal(order)">
                {{ order.btnText }}
              </button>
            </view>
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-section">
          <view v-if="loading" class="loading-tip">
            <u-loading-icon mode="spinner" size="20"></u-loading-icon>
            <text class="loading-text">加载中...</text>
          </view>
          <text
            v-else-if="hasMore && orderList.length !== 0"
            class="load-more-text"
            @click="loadMore"
            >点击加载更多</text
          >
          <text v-else-if="orderList.length > 0" class="no-more-text"
            >没有更多数据了</text
          >
        </view>
        <!-- 空状态 -->
        <view v-if="orderList.length === 0 && !loading" class="empty-state">
          <u-empty text="暂无评价数据" mode="data"></u-empty>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from '@/config/app.js'

export default {
  data() {
    return {
       IMAGE_URL: appConfig.IMAGE_URL,
      title: "我的评价",
      orderList: [],
      loading: false,
      refreshing: false,
      hasMore: true,
      page: 1,
      pageSize: 5,
    };
  },
  components: {
    headerVue,
  },
  onLoad() {
    this.loadOrders();
  },

  methods: {
    // 加载订单数据
    loadOrders() {
      this.loading = true;

      // 模拟网络请求
      setTimeout(() => {
        const newOrders = this.generateOrders(this.page, this.pageSize);

        if (this.page === 1) {
          this.orderList = newOrders;
        } else {
          this.orderList = [...this.orderList, ...newOrders];
        }

        // 模拟数据加载完毕
        if (this.page >= 3) {
          this.hasMore = false;
        } else {
          this.hasMore = true;
        }

        this.loading = false;
        this.refreshing = false;
        uni.stopPullDownRefresh();
      }, 600);
    },

    // 生成模拟订单数据 - 严格按照图片样式
    generateOrders(page, pageSize) {
      const orders = [];
      const startIndex = (page - 1) * pageSize;

      for (let i = 0; i < pageSize; i++) {
        // 使用图片中的实际数据作为模板
        const orderData = {
          orderNumber: "1331215413" + (256 + startIndex + i),
          serviceImage: "/static/images/clean-air.jpg", // 空调清洗图片
          serviceDesc: "空调清洗高温除尘菌让呼吸更清新...",
          serviceName: "日常保洁2小时",
          price: "60.10",
          priceType: "一口价",
          customerName: "刘昊然",
          customerPhone: "156****5463",
          complaintText: "师傅态度差，做事马虎",
          appealTime: `06-0${((startIndex + i) % 5) + 1} 11:0${
            (startIndex + i) % 10
          }`,
          btnText:
            i == 6
              ? "申诉中"
              : i == 1
              ? "申诉失败"
              : i == 7
              ? "申诉成功"
              : "申诉",
        };

        orders.push(orderData);
      }

      return orders;
    },

    // 下拉刷新
    onRefresh() {
      this.refreshing = true;
      this.page = 1;
      this.loadOrders();
    },

    // 加载更多
    loadMore() {
      if (this.loading || !this.hasMore) return;

      this.page++;
      this.loadOrders();
    },

    // 处理申诉
    handleAppeal(order) {
      console.log("申诉订单：", order);
      //判断btnText
      if (order.btnText == "申诉失败") {
        //跳转
        uni.navigateTo({
          url: "/views-master/my/appeal-info-fail",
        });
      } else if (order.btnText == "申诉") {
        uni.navigateTo({
          url: "/views-master/my/appeal-info",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.complaint-page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;

  .complaint-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    .scroll-view {
      height: 100%;
      padding: 20rpx 32rpx;
      box-sizing: border-box;
      width: 100%;
    }

    .order-card {
      padding: 28rpx;
      margin-bottom: 28rpx;
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      position: relative;
    }
    .complaint-icon {
      position: absolute;
      top: 8rpx;
      right: 12rpx;
    }

    .order-header {
      padding-bottom: 28rpx;
      border-bottom: 1rpx solid #ddd;
      margin-bottom: 28rpx;
      width: calc(100% - 80rpx);
    }

    .order-number {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }

    .service-info {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
    }

    .service-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      background-color: #f0f0f0;
      margin-right: 18rpx;
      overflow: hidden;
    }

    .service-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
    }
    .service-details-top {
      display: flex;
      flex-direction: column;
    }

    .service-desc {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      line-height: 1.4;
      margin-bottom: 8rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .service-name {
      font-size: 24rpx;
      color: #999999;
    }

    .price-section {
      display: flex;
      align-items: baseline;
    }

    .price {
      font-size: 24rpx;
      color: #ff4141;
      font-weight: bold;
      margin-right: 10rpx;
    }

    .price-type {
      font-size: 20rpx;
      color: #999999;
    }

    .customer-info {
      margin-bottom: 28rpx;
      display: flex;
      justify-content: space-between;
    }

    .customer-label {
      font-size: 28rpx;
      color: #666666;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }

    .customer-details {
      display: flex;
      align-items: center;
    }

    .customer-name {
      font-size: 28rpx;
      color: #333333;
    }

    .customer-phone {
      font-size: 28rpx;
      color: #333333;
      margin-left: 20rpx;
    }

    .complaint-info {
      background-color: #fff5f5;
      padding: 20rpx;
      border-radius: 6rpx;
      border-left: 4rpx solid #e74c3c;
      margin-bottom: 15rpx;
    }

    .complaint-label {
      font-size: 24rpx;
      color: #e74c3c;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }

    .complaint-text {
      font-size: 26rpx;
      color: #e74c3c;
      line-height: 1.4;
    }
    .appeal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 28rpx;
    }
    .appeal-time {
      font-size: 24rpx;
      color: #666666;
    }

    .appeal-btn {
      display: flex;
    }

    .btn-appeal {
      width: 170rpx;
      height: 56rpx;
      background: #0785cf;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      line-height: 56rpx;
      border: none;

      font-size: 28rpx;
      color: #ffffff;

      &:active {
        background-color: #0785cf;
      }
    }

    .loading-section {
      text-align: center;
      color: #999999;
      .loading-tip {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx 0;
        color: #999;
        font-size: 28rpx;
        gap: 16rpx;
      }
    }

    .load-more-text,
    .no-more-text {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40rpx 0;
      color: #999;
      font-size: 28rpx;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 60rpx;
        height: 1rpx;
        background: #e5e5e5;
      }

      &::before {
        left: 50%;
        transform: translateX(-120rpx);
      }

      &::after {
        right: 50%;
        transform: translateX(120rpx);
      }
    }

    .empty-state {
      text-align: center;
      padding: 100rpx 40rpx;
      color: #999999;
    }

    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 28rpx;
      color: #666666;
    }

    .divider {
      width: 100%;

      height: 1rpx;
      background: #ddd;
    }
  }
}
</style>
